<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用ajax发起异步请求</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="a"></div>
</body>
<script>

    $(() => {
        //getApi();
        postApi();
        postApi2();
    });

    function getApi() {
        const ids = [1, 2, 3];
        const name = '王';
        const old = 18;
        let params = {
            'ids': ids
        };

        $.ajax({
            url: 'http://127.0.0.1:80/json/view4',
            dataType: 'json',
            type: 'post',
            data: JSON.stringify(params),
            success: function (responseDate) {
                //使用这个方法获取到的数据直接就是对象给的, 可以直接使用`.`操作符号操作其中的属性, 不需要使用JSON类进行转换.111
                //const responseObject = JSON.parse(responseDate);
                console.log(responseDate.data);
            }
        });
    }

    function postApi() {
        $.post('http://localhost:80/json/view3', {}, (responseDate) => {
            //同样的, 这个数据也不需要转换, 直接就是对象类型的.
            console.log(responseDate);
        });
    }

    function postApi2() {
        let params = {
            ids: [1, 2]
        };
        $.ajax({
            url: 'http://localhost:80/json/view4',
            dataType: 'json',
            type: 'POST',
            /**
             * 功能:
             *      在使用ajax请求接口时, 这个不可以省略, 否则会导致浏览器报错: 415.
             * 说明:
             *      1. 这个参数表示从后台返回的数据时json形式, 并且编码为utf-8.
             */
            contentType: "application/json;charset=UTF-8",
            //这里表示将参数转换为json形式, spring mvc需要用@RequestBody注解修饰的对象接受参数, 否则后台接受不到参数
            data: JSON.stringify(params),
            success: function (responseDate) {
                //使用这个方法获取到的数据直接就是对象给的, 可以直接使用`.`操作符号操作其中的属性, 不需要使用JSON类进行转换.
                //const responseObject = JSON.parse(responseDate);
                console.log(responseDate.data);
            }
        });
    }

</script>
</html>